AWS Amplify Hostingでアプリをビルド、デプロイ、ホスティングする

こんにちは、yagiです。

今回は、AWS Amplify HostingでGithubと連携してReactアプリをデプロイする手順を記載したいと思います。 CI/CD環境も同時に構築できるので利用しています。

現在はこのようなCI/CD環境を同時に構築できHostingできるサービスが沢山あると思いますが、さまざまな事情で、そこからAWSへ移行したいなどの要件も増えているかとおもいます。

なお、AWS Amplify はデフォルトでは npm ci を利用するように amplify.yaml にコマンドが記載されていますが、今回は代わりに yarn を利用しました。

すでに別環境で動いているコードを移行することになるため、細かいアプリのバージョンなどを合わせる必要がありました。

そのため、デフォルトの Amplify.yaml を書き換えたり、パッケージのバージョンなどを指定する必要があったため、そのあたりも含めて記載したいと思います。

AWS Amplifyとは？

AWS Amplify は、フロントエンドのウェブ/モバイルデベロッパーが AWS でフルスタックアプリケーションを簡単に構築、出荷、ホストできるようにする完全なソリューションであり、ユースケースの進化に合わせて幅広い AWS サービスを活用できる柔軟性を備えています。クラウドの専門知識は不要。

Amplifyにはアプリケーションのバックエンドを構築したり、フロントエンドのUI構築したりする機能もありますが、今回はWebアプリケーションをホスティングする機能を使いたいと思います。

使ってみる

AWS Amplifyのコンソールへ移動し、新しいアプリケーション から ウェブアプリケーションをホスト をクリックします。

今回はGithubリポジトリにある既存のコードをから、ビルド、デプロイ、ホストしたいので、Githubを選択して、続行をクリックします。

リポジトリとブランチを選択して次へを押下します。もしプルダウンに表示されない場合は、Githubのアクセス許可を表示 をクリックします。

Githubのアクセス許可を表示 をクリックした場合は、Github側でアクセス権の更新を行います。選択したリポジトリにアクセス権限を付与したいリポジトリのみが含まれていることを確認して、 Update access を押下します。

ビルドの設定画面で、編集をクリックして amplify.yaml を編集します。

参考までに、以下のように書き換えています。なおテストセクションは今回省いています。

amplify.yaml

version: 1.0
frontend:
  phases:
    preBuild:
      commands:
        - 'nvm use "${VERSION_NODE_16}"'
        - 'yarn install'
    build:
      commands:
        - 'yarn run build'
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - 'node_modules/**/*'

編集が終わったら、保存をクリックします。

その下の、ライブパッケージの更新 でパッケージとバージョンを指定できます。

Node.jsのバージョンを 16.17.1 を利用する必要があったので、追加しています。

内容をレビュー後、保存してデプロイ をクリックします。

IAMで AdministratorAccess-Amplify をアタッチしたロールを作成しておきます。

アプリの設定 ＞ 全般 から、サービスロールを先ほど作成したロールを指定しておきます。

プロビジョン→構築→デプロイと進んでいき全てが緑になったら終了となります。ドメインにあるURLを押下して、ホスティングされたWebサイトを確認します。

感想

AWS Amplify　Hosting を利用して、Githubと連携してReactアプリをデプロイする手順を記載しました。

amplify.yaml はデフォルトだとnpm ci を利用するように記載されているため、yarn を利用するように編集しています。これが中々うまくいかず時間がかかったので、 この記事がどなたかの参考になれば嬉しいです。（そして自分への備忘録にも）

参考

フロントエンドエンジニアに捧げるAWS Amplify Console

こちらのブログが大変参考になりました。ちなみにAmplifyは他にも色々と機能があるので要件に合わせてこれからも色々活用したいと思います。